<script lang="ts" setup>
import { FileTextTwoTone } from "@ant-design/icons-vue"
interface DataItem {
  title: string;
}
const data: DataItem[] = [
  {
    title: 'Title 1',
  },
  {
    title: 'Title 2',
  },
  {
    title: 'Title 3',
  },
  {
    title: 'Title 4',
  },
  {
    title: 'Title 5',
  },
  {
    title: 'Title 6',
  },
];
</script>

<template>
  <div style="padding: 15px;">
      <div>
        <a-list :grid="{ gutter: 16, xs: 1, sm: 1, md: 1, lg: 2, xl: 2, xxl: 3 }" :data-source="data">
          <template #renderItem="{ item }">
            <a-list-item>
              <a>
                <a-card :bodyStyle="{padding:'10px'}">

                    <a-list-item-meta
                        description="查看、编辑hosts文件"
                    >
                      <template #title>
                        编辑hosts
                      </template>
                      <template #avatar>
                        <FileTextTwoTone style="font-size: 40px" />
                      </template>
                    </a-list-item-meta>
                </a-card>
              </a>
            </a-list-item>
          </template>
        </a-list>
      </div>
  </div>
</template>
<style scoped lang="less">
.ant-list-item{
  a:hover{
    .ant-card{
      background-color: #f6f6f6;
    }
  }
}
</style>
